<template>
  <view class="register page-container">
    <view class="register-header">
      注册
    </view>

    <view class="register-main">
      <view class="register-username">
        <nut-input
          v-model="form.phoneNumber"
          autofocus
          clearable
          type="number"
          placeholder="请输入手机号"
          style="color: #fff;"
        >
          <template #left>
            <nut-icon name="../../static/images/login/IcOutlinePhoneAndroid.png" />
          </template>
        </nut-input>
      </view>

      <view v-if="usernameErrorMessage" class="register-username__error">
        <text>{{ usernameErrorMessage }}</text>
      </view>

      <view class="register-verification">
        <nut-input
          v-model="form.verificationCode"
          clearable
          type="number"
          placeholder="请输入验证码"
          style="color: #fff;"
        >
          <template #left>
            <nut-icon name="../../static/images/login/IcOutlineLock.png" />
          </template>
        </nut-input>

        <nut-button @click="getVerificationCode">获取验证码</nut-button>
      </view>

      <view v-if="passwordErrorMessage" class="register-password__error">
        <text>{{ passwordErrorMessage }}</text>
      </view>

      <view class="register-password">
        <nut-input
          v-model="form.password"
          clearable
          password
          placeholder="请输入密码"
          style="color: #fff;"
        >
          <template #left>
            <nut-icon name="../../static/images/login/IcOutlineLock.png" />
          </template>
        </nut-input>
      </view>

      <view v-if="passwordErrorMessage" class="register-password__error">
        <text>{{ passwordErrorMessage }}</text>
      </view>

      <view class="register-btn">
        <nut-button type="primary" size="large" @click="register">注册</nut-button>
      </view>
    </view>
  </view>
  
</template>

<script setup>
import { ref } from 'vue';

import { sendVerificationCode, register as apiRegister } from '../../api'
import { setToken } from '../../utils/storage'
import { USER_INFO_KEY } from '../../constants/key';


const form = ref({
  phoneNumber: '',
  verificationCode: '',
  password: ''
})

const usernameErrorMessage = ref('');
const verificationCodeErrorMessage = ref('');
const passwordErrorMessage = ref('');
const clearErrorMessages = () => {
  usernameErrorMessage.value = '';
  verificationCodeErrorMessage.value = '';
  passwordErrorMessage.value = '';
}

// 获取验证码
const getVerificationCode = async () => {
  clearErrorMessages();

  if (form.value.phoneNumber.length !== 11) {
    usernameErrorMessage.value = '请填写正确的手机号';
    return void 0;
  }

  await sendVerificationCode({
    phone: form.value.phoneNumber,
    code_type: 'register',
    region: "CN"
  })
}


const register = async () => {
  clearErrorMessages();

  if (form.value.phoneNumber.length !== 11) {
    usernameErrorMessage.value = '请填写正确的手机号';
    return void 0;
  }

  if (form.value.verificationCode.length !== 6) {
    verificationCodeErrorMessage.value = '请填写正确的验证码';
    return void 0;
  }

  uni.showLoading({
    title: "注册中...",
    mask: true
  })

  const res = await apiRegister({
    phone: form.value.phoneNumber,
    code: form.value.verificationCode,
    username: "",
    password: form.value.password,
    region: "CN"
  })

  uni.hideLoading()

  if (res.statusCode === 200) {
    setToken(res.data.access_token);
    uni.setStorageSync(USER_INFO_KEY, res.data.user)
    
    // 注册成功
    uni.showToast({
      title: "注册成功",
      icon: "success",
      duration: 3000
    })

    uni.switchTab({ url: '/pages/Home/index' })()
  }
}

</script>

<style lang="scss">
.register {
  --container-width: 85vw;

  .register-header {
    width: var(--container-width);
    margin: 5vh auto 12vh;

    color: #ffc300;
    font-size: 40rpx;
    font-weight: 500;
  }

  .register-main {
    width: var(--container-width);

    .nut-input {
      border: 1px solid #ffc300;
      border-radius: 8px;

      background-color: #2a2a2a;

      .nut-input__input {
        color: #fff !important;
      }
    }

    .register-username, .register-verification {
      margin-bottom: 22px;
    }

    .register-verification {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .nut-input {
        width: 60%;
      }
    }

    .register-password {
      margin-bottom: 10vh;
    }
  }

  .register-action {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: var(--container-width);
    margin-bottom: 6vh;
  }

  .register-username__error, .register-password__error {
    height: 22px;
    margin-top: -20px;
    
    font-size: 14px;
    // line-height: 1.1;
    
    color: #ff4d4f;
  }
}
</style>